<template>
  <div class="project-details-container">
    <el-tabs type="border-card" v-model="tabType" @tab-click="handleClick">
      <el-tab-pane label="合同数据" name="contractdata">
        <contractdata/>
      </el-tab-pane>
      <el-tab-pane v-if="roleType!==3 && roleType!==7" label="投标数据" name="biddingdata">
        <biddingdata v-if="isBiddingdata"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {
    getProStatistics
  } from '@/api/projectdetails'
  // import project from './components/project'
  import biddingdata from './components/biddingdata'
  import contractdata from './components/contractdata'

  export default {
    name: 'projectdetails',
    components: {
      // project,
      biddingdata,
      contractdata
    },
    computed: {
      roleType() {
        return this.$store.state.user.roleType
      },
      teamId() {
        return this.$store.state.user.teamId
      }
    },
    mounted() {
      // this.fetchData()
    },
    data() {
      return {
        searchFormList: {},
        chartData: {},
        btnType: 1,
        tabType: 'contractdata',
        isBiddingdata: false // 用于只一次刷新投标数据
      }
    },
    methods: {
      fetchData() {
        this.searchFormList.roleType = this.roleType
        this.searchFormList.teamId = this.teamId
        getProStatistics(this.searchFormList).then(response => {
          const data = response.responseBody
          this.chartData = Object.assign({}, this.teamRow, data)
        })
      },
      btnClick(type) {
        this.btnType = type
        this.fetchData()
      },
      dateChange() {
        this.fetchData()
      },
      handleClick(tab, event) {
        this.tabType = tab.name
        if (tab.name === 'biddingdata') {
          this.isBiddingdata = true
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .project-details-container {
    height: calc(100vh - 130px);
    /*padding: 32px;*/
    overflow: auto;
  }
</style>
